<template>
    <van-sticky>
        <van-tabs v-model:active="status" @click-tab="onChangeStatus">
            <van-tab v-for="(status,key) in statusList" :key="key" :title="status" :name="key"></van-tab>
        </van-tabs>
    </van-sticky>
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
        <div v-if="needLogin" class="van-list__finished-text" @click="login">前往登录</div>
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            :immediate-check="false"
            finished-text="没有更多了"
            v-model:error="error"
            error-text="请求失败，点击重新加载"
            @load="load"
            v-else
        >
            <div class="coupon_list">
                <div class="coupon_item" v-for="(coupon,index) in couponList" :key="coupon.id">
                    <div class="item_content">
                        <router-link :to="`/coupon/info?id=${coupon.id}`">
                            <div class="left">{{coupon.rate*100%10?coupon.rate*100:coupon.rate*10}}<span>折</span></div>
                            <div class="right">
                                <div>{{coupon.title}}</div>
                                <div>剩余数量：<span>{{coupon.total}}</span>张</div>
                                <div>过期时间：{{coupon.endDate}}</div>
                            </div>
                        </router-link>
                    </div>
                    <div class="item_btn">
                        <van-button type="primary" color="#3f332a" size="mini" @click="login" v-if="!coupon.s&&coupon.total>0">{{btn_text[3]}}</van-button>
                        <van-button type="primary" color="#3f332a" size="mini" plain @click="login" v-else-if="!coupon.s&&coupon.total<=0">{{btn_text[5]}}</van-button>
                        <van-button type="primary" color="#3f332a" size="mini" plain @click="buy" v-else-if="coupon.s=='1'">{{btn_text[0]}}</van-button>
                        <van-button type="primary" color="#3f332a" size="mini" @click="receive(coupon.id,index)" v-else-if="coupon.s=='4'">{{btn_text[3]}}</van-button>
                        <van-button type="primary" color="#3f332a" size="mini" disabled v-else>{{btn_text[coupon.s-1]}}</van-button>
                    </div>
                </div>
            </div>
        </van-list>
      
    </van-pull-refresh>
</template>

<script setup>
const {proxy} = getCurrentInstance()
const statusList = ref(['全部','可使用'])
const status = ref(0)
const couponList = ref([])
let page = ref(1)
let finished = ref(false) //是否无更多数据
let refreshing = ref(false) //下拉刷新
let loading = ref(false)
let error = ref(false)

const buy = ()=>proxy.$router.push('/cart')
const btn_text = ref(['去使用','已过期','已使用','领取','已结束','已领完'])
//下拉刷新
const refresh = async () =>
{
    couponList.value = []
    refreshing.value = true
    page.value = 1
    finished.value = false
    loading.value = true

    //加载数据方法
    load()
}

//加载数据方法
const load = async () =>
{
  let result = await proxy.$GET({
    url:'/coupon',
    params:{
        status:status.value+2,
        page:page.value,
        pageSize:6
    }
  })
  if(result.code==1)
  {
    result = result.data
    couponList.value = couponList.value.concat(result.data)
    refreshing.value = false
    loading.value = false
    finished.value = !result.has_more
    if(result.has_more)  page.value++
  }
}
onBeforeMount(async()=>{
    refresh()
})
let isLogin = ref(proxy.$business.value.id != 0)
const onChangeStatus = ()=>{
    refresh()
}
</script>

<style scoped>
  @import url('/assets/css/CouponIndex.css');
</style>